<div class="row">
    <div class="col-12">
        <div class="card mb-4">
            <div class="card-body">
                <filter-list request="request" callback="getList(pageIndex)" create-url="'/portal/page/create'"
                    create-text="'Create Page'"></filter-list>

                <select ng-change="selPageType()" ng-model="pageType" class="custom-select col-2">
                    <!-- <option selected="select">Select Type</option> -->
                    <option ng-repeat="item in pageTypes track by $index" value="{{item.value}}">{{item.name}}
                    </option>
                </select>

                <hr>
                <table id="list-page" class="table table-sm table-hover mb-0" dnd-list="data.items"
                    dnd-disable-if="canDrag" cellspacing="0" ng-init="getList()">
                    <thead class="thead-light">
                        <tr>
                            <!-- <th ng-if="!canDrag" scope="col" width="15px">
                            </th>
                            <th ng-if="!canDrag" scope="col" width="15px">
                            </th> -->
                            <th scope="col" width="15px">
                                <div class="custom-control custom-checkbox">
                                    <input type="checkbox" class="custom-control-input"
                                        ng-model="selectedList.isSelectAll"
                                        ng-change="selectAll(selectedList.isSelectAll)" id="customCheck_all">
                                    <label class="custom-control-label" for="customCheck_all"></label>
                                </div>
                            </th>
                            <th scope="col" width="20%">
                                Page
                            </th>
                            <th scope="col">
                                Excerpt
                            </th>
                            <th scope="col" width="15%">
                                Created Date
                            </th>
                            <th scope="col" width="15%">
                                Author
                            </th>
                            <th scope="col" width="5%" class="text-right"></th>
                        </tr>
                    </thead>

                    <tbody ng-repeat="item in data.items" dnd-draggable="item" dnd-effect-allowed="move"
                        dnd-selected="selected = item" dnd-moved="updateInfos($index)"
                        ng-class="{'selected': selected === item}" class="border-top">
                        <tr class="" sort-model="category" sort-model-id="{{item.id}}">
                            <!-- <td ng-if="!canDrag" style="cursor:grab;" class="drag-header align-middle small">
                                <small class="fa fa-grip-vertical text-black-50"></small>
                            </td>
                            <td ng-if="!canDrag" class="align-middle">
                                <div class="btn-group-vertical" role="group" aria-label="Basic example">
                                    <button ng-click="goUp(item.childs, $index)" type="button" title="Move up"
                                        class="btn  btn-xs py-0 border-bottom"><span
                                            class="fa fa-sort-up small"></span></button>
                                    <button ng-click="goDown(item.childs, $index)" type="button" title="Move down"
                                        class="btn  btn-xs py-0"><span class="fa fa-sort-down small"></span></button>
                                </div>
                            </td> -->
                            <td class="align-middle ">
                                <div class="custom-control custom-checkbox">
                                    <input type="checkbox" class="custom-control-input" id="customCheck_{{item.id}}"
                                        ng-model="item.isSelected" ng-change="select(item.id, item.isSelected)">
                                    <label class="custom-control-label" for="customCheck_{{item.id}}"></label>
                                </div>
                            </td>
                            <td class="">
                                <small>
                                    {{item.title}}
                                </small>
                            </td>
                            <td class="text-secondary">
                                <small>
                                    {{shortString(item.excerpt,50)}}
                                </small>
                            </td>
                            <td class="text-secondary">
                                <small>
                                    {{item.createdDateTime | utcToLocal:'dd.MM.yy hh:mm a'}}
                                </small>
                            </td>
                            <td class="text-secondary">
                                <small>{{item.createdBy}}</small>
                            </td>
                            <td>
                                <div class="btn-group btn-group-sm btn-group-sm float-right" role="group"
                                    aria-label="Actions">

                                    <a ng-if="item.childs.length>0" class="btn btn-link text-primary"
                                        data-toggle="collapse" role="button" ng-click="showChilds(item.id)">
                                        <i class="fas fa-project-diagram"></i>
                                    </a>

                                    <a href="" ng-click="goToPath('/portal/page/details/' + item.id)"
                                        class="btn btn-link">
                                        <span class="fa fa-pen"></span>
                                    </a>
                                    <a href="{{item.detailsUrl}}" target="_blank" class="btn btn-link"><span
                                            class="fas fa-link"></span></a>
                                    <a ng-if="item.type==2"
                                        ng-click="goToPath('/portal/page/page-post/list/' + item.id)"
                                        class="btn btn-link text-primary">
                                        <span class="fas fa-bars"></span>
                                    </a>
                                    <!--
                                                <a ng-if="item.type==2" href="#" data-toggle="modal" data-target="#modal-posts" class="btn btn-link">
                                                    <span class="fas fa-bars text-secondary"></span>
                                                </a>-->
                                    <a class="btn btn-link text-danger" ng-click="remove(item.id)">
                                        <span class="fas fa-trash-alt"></span>
                                    </a>
                                </div>
                            </td>
                        </tr>
                        <tr id="childs-{{item.id}}" class="collapse">
                            <td colspan="7" style="padding:0">
                                <div class="pl-4">
                                    <table class="table table-sm table-hover mb-0 border" cellspacing="0"
                                        ng-if="item.childs.length>0">
                                        <thead class="thead-light">
                                            <tr>
                                                <th scope="col" style="cursor:grab;" class="drag-header align-middle"
                                                    width="15px">
                                                    <!-- <small class="fa fa-grip-vertical text-black-50"></small> -->
                                                </th>
                                                <th width="15px">

                                                </th>
                                                <th scope="col" width="20%">
                                                    Title
                                                </th>
                                                <th scope="col">
                                                    Excerpt
                                                </th>
                                                <th scope="col" width="15%">
                                                    Created Date
                                                </th>
                                                <th scope="col" width="15%">
                                                    Author
                                                </th>

                                                <th scope="col" width="5%" class="text-right"></th>
                                            </tr>
                                        </thead>

                                        <tbody>
                                            <tr ng-repeat="c in item.childs">
                                                <td scope="col" style="cursor:grab;" class="drag-header align-middle"
                                                    width="15px">
                                                    <small class="fa fa-grip-vertical text-black-50"></small>
                                                </td>
                                                <td>
                                                    <div class="btn-group-vertical" role="group"
                                                        aria-label="Basic example">
                                                        <button ng-click="goUp(item.childs, $index)" type="button"
                                                            title="Move up"
                                                            class="btn btn-link text-secondary btn-xs py-0 border-bottom"><span
                                                                class="fa fa-sort-up small"></span></button>
                                                        <button ng-click="goDown(item.childs, $index)" type="button"
                                                            title="Move down"
                                                            class="btn btn-xs text-secondary py-0 btn-link"><span
                                                                class="fa fa-sort-down small"></span></button>
                                                    </div>
                                                </td>
                                                <td>
                                                    <small ng-bind="c.page.title"></small>
                                                </td>
                                                <td>
                                                    <small ng-bind="shortString(c.page.excerpt,50)"></small>
                                                </td>
                                                <td>
                                                    <small>
                                                        {{c.createdDateTime | utcToLocal:'dd.MM.yy - hh:mm a'}}
                                                    </small>
                                                </td>
                                                <td>
                                                    <small>{{c.page.createdBy}}</small>
                                                </td>

                                                <td>
                                                    <div class="btn-group btn-group-sm btn-group-sm float-right"
                                                        role="group" aria-label="Actions">
                                                        <a href="" ng-click="goToPath('/portal/page/details/' + c.id)"
                                                            class="btn btn-link"><span
                                                                class="fa fa-pen small"></span></a>
                                                        <a href="{{c.detailsUrl}}" target="_blank"
                                                            class="btn btn-link text-primary"><span
                                                                class="fas fa-link small"></span></a>
                                                        <a ng-if="c.page.type==2"
                                                            ng-click="goToPath('/portal/page/page-post/list/' + c.page.id)"
                                                            class="btn btn-link text-primary">
                                                            <span class="fas fa-bars"></span>
                                                        </a>
                                                        <a ng-click="remove(item.id);" class="btn btn-link text-danger">
                                                            <span class="fas fa-trash-alt"></span>
                                                        </a>
                                                    </div>
                                                </td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <div class="card-footer">
                <div class="row">
                    <!-- <div class="col-6">
                        <small ng-if="canDrag" class="text-info"
                            ng-bind="translate('warning_can_not_drag_drop',true, 'Note: Drag Drop only allow when order by priority asc')"></small>
                    </div> -->
                    <div class="col-12">
                        <paging class="small" page="data.page" page-size="data.pageSize" total="data.totalItems"
                            ul-class="pagination justify-content-end m-0" a-class="page-link"
                            paging-action="getList(page-1)" scroll-top="true">
                        </paging>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>